<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Home</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="../static/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="../static/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="../static/plugin/waves/waves.min.css">

    <!-- Sweet Alert -->
    <link rel="stylesheet" href="../static/plugin/sweet-alert/sweetalert.css">

    <!-- Morris Chart -->
    <link rel="stylesheet" href="../static/plugin/chart/morris/morris.css">

    <!-- FullCalendar -->
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.print.css" media='print'>

    <!-- Dark Themes -->
<!--    <link rel="stylesheet" href="/styles/style-black.min.css">-->
</head>

<body>
<div th:replace="menu"></div>
<div th:replace="nav"></div>

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="col-xs-12">
                <div class="box-content">
                    <h4 class="box-title">Default</h4>
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback col-lg-push-8 margin-bottom-20">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button class="btn btn-default dropdown-toggle" id="search-btn"
                                            data-toggle="dropdown" type="button" aria-haspopup="true"
                                            aria-expanded="false">
                                        角色 <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" id="role">
                                        <li><a href="javascript:void(0)">角色</a></li>
                                        <li><a href="javascript:void(0)">物业</a></li>
                                        <li><a href="javascript:void(0)">平台</a></li>
                                        <li><a href="javascript:void(0)">出租客</a></li>
                                        <li><a href="javascript:void(0)">抢租客</a></li>
                                    </ul>
                                </div>
                                <input type="text" class="form-control" id="condition" placeholder="请输入查询条件"/>
                            </div>
                            <button type="button" class="btn btn-warning" id="Select"><i
                                    class="glyphicon glyphicon-search"></i></button>
                        </div>

                    </form>
                    <table id="example" class="table table-striped table-bordered display" style="width:100%">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>身份证号</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <tbody id="tbody1">
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="8" align="center">
                                <ul class="pagination" id="byPage">

                                </ul>
                            </td>
                        </tr>

                        </tfoot>
                    </table>
                </div>
                <!-- /.box-content -->
            </div>
        </div>
    </div>
</div><!--/#wrapper -->
<script src="../static/scripts/html5shiv.min.js"></script>
<script src="../static/scripts/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../static/scripts/jquery.min.js"></script>
<script src="../static/scripts/modernizr.min.js"></script>
<script src="../static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../static/plugin/nprogress/nprogress.js"></script>
<script src="../static/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="../static/plugin/waves/waves.min.js"></script>

<!-- Responsive Table -->
<script src="../static/plugin/RWD-table-pattern/js/rwd-table.min.js"></script>
<script src="../static/scripts/rwd.demo.min.js"></script>

<script src="../static/scripts/main.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.dropdown-menu a').click(function () {
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
        $("#Select").click(function () {
            showByPage(1);
        });
        showByPage(1);

    })

    function showByPage(pageNum) {
        let condition = $("#condition").val();
        let rname = $('#search-btn').text().trim();
        $.ajax({
            url: "/manage/index",
            type: "post",
            data: {
                "pageNum": pageNum,
                "condition": condition,
                "rname": rname
            },
            success: function (obj) {
                console.log(obj.userList)
                if (obj.result) {
                    let message = "";
                    $.each(obj.userList,
                        function (index, user) {
                            message += "<tr>";
                            message += "<td>" + (index + 1) + "</td>";
                            message += "<td>" + user.uname + "</td>";
                            message += "<td>" + user.idCard + "</td>";
                            message += "<td>";
                            message += "<button type='button' class='btn btn-info  btn-rounded btn-xs waves-effect waves-light' onclick='assignRole("+user.uid+")'><i class='glyphicon glyphicon-ok'>修改角色</i></button>";
                            message += "</td>";
                            message += "</tr>";
                        });
                    $("#tbody1").html(message);

                    var pageMessage = "";
                    pageMessage += '<li class="' + (obj.pageInfo.pageNum == 1 ? "disabled" : "") + '"><a onclick="showByPage(' + obj.pageInfo.prePage + ')">上一页</a></li>';
                    for (var i = 1; i <= obj.pageInfo.pages; i++) {
                        pageMessage += '<li class="' + (obj.pageInfo.pageNum == i ? "active" : "") + '"><a onclick="showByPage(' + i + ')">' + i + ' <span class="sr-only">(current)</span></a></li>';
                    }
                    pageMessage += '<li class="' + (obj.pageInfo.pageNum == obj.pageInfo.pages ? "disabled" : "") + '"><a onclick="showByPage(' + obj.pageInfo.nextPage + ')">下一页</a></li>';
                    $("#byPage").html(pageMessage);
                }

            }

        });
    }
    function assignRole(uid) {
        location.href = "/manage/assignRole?uid=" + uid;
    }

</script>
</body>
</html>